<template>
  <span>
    <el-form-item v-if="_cascading >= 1">
      <el-autocomplete
        v-model="acName1"
        :fetch-suggestions="querySearchAsync1"
        :placeholder="_placeholder1"
        style="vertical-align: top"
        size="small"
        :props="_props1"
        @select="handleAcSelect1"
      ></el-autocomplete>
    </el-form-item>
    <el-form-item v-if="_cascading >= 2">
      <el-autocomplete
        v-model="acName2"
        :fetch-suggestions="querySearchAsync2"
        :placeholder="_placeholder2"
        style="vertical-align: top"
        size="small"
        :props="_props2"
        @select="handleAcSelect2"
      ></el-autocomplete>
    </el-form-item>
    <el-form-item v-if="_cascading >= 3" >
      <el-autocomplete
        v-model="acName3"
        :fetch-suggestions="querySearchAsync3"
        :placeholder="_placeholder3"
        style="vertical-align: top"
        size="small"
        :props="_props3"
        @select="handleAcSelect3"
      ></el-autocomplete>
    </el-form-item>
  </span>
</template>

<script>
  import {sessionOut} from '../../../smartlight/common/js/util.js'
  import $ from 'jquery'
  export default {
    name: 'ktCascadingSearchInput',
    props: {
      url1: {type: String, required: true},
      param1: {type: Object, default () { return {} }},
      url2: {type: String, required: true},
      param2: {type: Object, default () { return {} }},
      url3: {type: String, required: true},
      param3: {type: Object, default () { return {} }},
      placeholder1: {type: String, default: '商家名称'},
      placeholder2: {type: String, default: '店铺名称'},
      placeholder3: {type: String, default: '门店名称'},
      props1: {
        type: Object,
        default () {
          return {label: 'companyName', value: 'id'}
        }
      },
      props2: {
        type: Object,
        default () {
          return {label: 'shopName', value: 'id'}
        }
      },
      props3: {
        type: Object,
        default () {
          return {label: 'storeName', value: 'id'}
        }
      },
      cascading: {type: Number, default: 3}
    },
    data () {
      return {
        currUser: {},
        loginType: '',
        all1: [],
        all2: [],
        all3: [],
        copyTotalAll2: [],
        copyTotalAll3: [],
        acName1: '',
        acName2: '',
        acName3: '',
        flagSelect1: false,
        flagSelect2: false,
        flagSelect3: false
      }
    },
    computed: {
      _url1 () {
        return this.url1
      },
      _param1 () {
        return this.param1
      },
      fieldName1 () {
        return this.props1.label
      },
      _url2 () {
        return this.url2
      },
      _param2 () {
        return this.param2
      },
      fieldName2 () {
        return this.props2.label
      },
      _url3 () {
        return this.url3
      },
      _param3 () {
        return this.param3
      },
      fieldName3 () {
        return this.props3.label
      },
      _placeholder1 () {
        return this.placeholder1
      },
      _placeholder2 () {
        return this.placeholder2
      },
      _placeholder3 () {
        return this.placeholder3
      },
      _props1 () {
        return this.props1
      },
      _props2 () {
        return this.props2
      },
      _props3 () {
        return this.props3
      },
      _cascading () {
        return this.cascading
      }
    },
    methods: {
      handleAcSelect1 (i) {
//        console.log(i)
//        this.filters.queryCompanyId = i.id //////////////////////////////////////
//        console.log('select')
        this.$emit('select1', i.id)
        this.acName1 = i[this.fieldName1]
        this.flagSelect1 = true // 标识发生了选择事件
        if (this._cascading >= 2) this.init2(i.id)
        if (this._cascading >= 3) this.init3(i.id, '')
        this.acName2 = ''
        this.acName3 = ''
      },
      handleAcSelect2 (i) {
//        console.log(i)
//        this.filters.queryShopId = i.id //////////////////////////////////////////
        this.$emit('select2', i.id)
        this.acName2 = i[this.fieldName2]
        if (this._cascading >= 3) this.init3('', i.id)
        this.flagSelect2 = true // 标识发生了选择事件
        this.acName3 = ''
      },
      handleAcSelect3 (i) {
//        console.log(i)
//        this.filters.queryStoreId = i.id //////////////////////////////////////////
        this.$emit('select3', i.id)
        this.acName3 = i[this.fieldName3]
        this.flagSelect3 = true // 标识发生了选择事件
      },
      init1 () {
        this.$http.post(this._url1, Object.assign({type: this.loginType}, this._param1)).then((resp) => {
          let resBody = resp.body
          if (resBody.isSuccess === 2) {
            sessionOut(this) // session超时处理
            return
          }
          if (resBody.isSuccess !== 0) {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
            return
          }
          this.all1 = resBody.result
        })
      },
      init2 (id1) {
        this.$http.post(this._url2, Object.assign({type: this.loginType, companyId: id1}, this._param2)).then((resp) => {
          let resBody = resp.body
          if (resBody.isSuccess === 2) {
            sessionOut(this) // session超时处理
            return
          }
          if (resBody.isSuccess !== 0) {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
            return
          }
          if (id1 === 0) {
            this.copyTotalAll2 = resBody.result
            this.all2 = resBody.result
          } else {
            this.all2 = resBody.result
          }
        })
      },
      init3 (id1, id2) {
        this.$http.post(this._url3, Object.assign({type: this.loginType, companyId: id1, shopId: id2}, this._param3)).then((resp) => {
          let resBody = resp.body
          if (resBody.isSuccess === 2) {
            sessionOut(this) // session超时处理
            return
          }
          if (resBody.isSuccess !== 0) {
            this.$message({
              showClose: true,
              message: resBody.errorMsg,
              type: 'error'
            })
            return
          }
          if (id1 === 0 && id2 === 0) {
            this.copyTotalAll3 = resBody.result
            this.all3 = resBody.result
          } else {
            this.all3 = resBody.result
          }
        })
      },
      querySearchAsync1 (queryString, cb) {
        var arr = this.all1
        var results = queryString ? arr.filter(this.createFilter1(queryString)) : arr
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      createFilter1 (queryString) {
        return (obj) => {
          return (obj[this.fieldName1].toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
        }
      },
      querySearchAsync2 (queryString, cb) {
        var arr = this.all2
        var results = queryString ? arr.filter(this.createFilter2(queryString)) : arr
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      createFilter2 (queryString) {
        return (obj) => {
          return (obj[this.fieldName2].toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
        }
      },
      querySearchAsync3 (queryString, cb) {
        var arr = this.all3
        var results = queryString ? arr.filter(this.createFilter2(queryString)) : arr
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      createFilter3 (queryString) {
        return (obj) => {
          return (obj[this.fieldName3].toLowerCase().indexOf(queryString.toLowerCase()) !== -1)
        }
      }
    },
    mounted () {
      let currUserStr = sessionStorage.getItem('user')
      if (currUserStr) {
        this.currUser = JSON.parse(currUserStr)
        this.loginType = this.currUser.type
      }
      this.init1() // 初始化商家
      if (this._cascading >= 2) this.init2('') // 初始化店铺
      if (this._cascading >= 3) this.init3('', '') // 初始化门店
      let thisVue = this
      $('input.el-input__inner[placeholder="' + thisVue._placeholder1 + '"]').blur(function (e) {
//        console.log('blur')
      }).bind('input', function (e) {
        thisVue.flagSelect1 = false
//        console.log('input')
      }).change(function (e) {
        if (!thisVue.flagSelect1) {
          thisVue.all2 = thisVue.copyTotalAll2
          thisVue.all3 = thisVue.copyTotalAll3
          thisVue.acName1 = ''
          thisVue.acName2 = ''
          thisVue.acName3 = ''
          thisVue.$emit('select1', 0)
          thisVue.$emit('select2', 0)
          thisVue.$emit('select3', 0)
        }
//        console.log('change' + thisVue.flagSelect1)
      })
      $('input.el-input__inner[placeholder="' + thisVue._placeholder2 + '"]').blur(function (e) {
      }).bind('input', function (e) {
        thisVue.flagSelect2 = false
      }).change(function (e) {
        if (!thisVue.flagSelect2) {
          thisVue.all3 = thisVue.copyTotalAll3
          thisVue.acName2 = ''
          thisVue.acName3 = ''
          thisVue.$emit('select2', 0)
          thisVue.$emit('select3', 0)
        }
      })
      $('input.el-input__inner[placeholder="' + thisVue._placeholder3 + '"]').blur(function (e) {
      }).bind('input', function (e) {
        thisVue.flagSelect3 = false
      }).change(function (e) {
        if (!thisVue.flagSelect3) {
          thisVue.acName3 = ''
          thisVue.$emit('select3', 0)
        }
      })
    },
    components: {
      $
    }
  }
</script>

<style>
.el-autocomplete .el-input{display:inline}


</style>
